/**
 * 选择顾问
 */
import { fetch } from '../../../common/api';
import { log } from '../../../common/tool';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { TreeSelect, Spin, message, Select, Row, Col } from 'antd';

const { Option } = Select;

function buildGroupChildData(child) {
    if (!child || !Array.isArray(child)) return [];
    return child.map((item) => {
        return {
            title: item.name,
            value: item.groupId,
            key: item.groupId,
            children: buildGroupChildData(item.child),
        };
    });
}

// 封装组件
class AjaxManagerSelect extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            managerGroupData: [],
            managerData: [],
        };
        this.handleChangeGroup = this.handleChangeGroup.bind(this);
        this.handleChangeManager = this.handleChangeManager.bind(this);
        // 是否已加载
        this.open = true;
    }

    componentDidMount() {
        const { value } = this.props;
        this.handleGetGroupList();
        if (value[0]) {
            this.handleGetManagerList(value[0]);
        }
    }

    componentDidUpdate(prevProps) {
        const { value } = prevProps;
        // 查询是否有变更组
        const newValue = this.props.value || [];
        if (value && newValue[0] !== value[0]) {
            this.handleGetManagerList(newValue[0]);
        }
    }

    componentWillUnmount() {
        this.open = false;
    }

    render() {
        const { managerGroupData, managerData, loading } = this.state;
        const { value } = this.props;
        return (
            <Spin spinning={loading} className="app-manager-select">
                <Row>
                    <Col span={12} className="p-r">
                        <TreeSelect
                            showSearch
                            value={value ? value[0] : ''}
                            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                            treeData={managerGroupData}
                            placeholder="选择用户组"
                            onChange={this.handleChangeGroup}
                            treeNodeFilterProp="title"
                            notFoundContent="未找到数据"
                            allowClear
                        />
                    </Col>
                    <Col span={12}>
                        <Select
                            showSearch
                            optionFilterProp="children"
                            value={value ? value[1] : ''}
                            onChange={this.handleChangeManager}
                            placeholder="选择用户"
                            notFoundContent="未找到用户"
                            allowClear
                        >
                            <Option value="">选择用户</Option>
                            {managerData.map((item) => (
                                <Option key={item.value} value={item.value}>
                                    {item.label}
                                </Option>
                            ))}
                        </Select>
                    </Col>
                </Row>
            </Spin>
        );
    }

    handleGetGroupList() {
        const { groupId, urls } = this.props;
        this.setState({
            loading: true,
        });
        fetch({
            urls,
            apiPath: 'common-organize-ajax',
            apiData: groupId || 179,
            apiMethod: 'get',
            opts: {
                timeout: 60 * 1000,
            },
        })
            .then((data) => {
                const managerGroupData = data.data.map(function (group) {
                    return {
                        title: group.name,
                        value: group.groupId,
                        key: group.groupId,
                        children: buildGroupChildData(group.child),
                    };
                });
                managerGroupData.unshift({
                    title: '选择用户组',
                    value: '',
                    key: 'all',
                });
                // 判断如果卸载,则不再设置数据
                if (!this.open) return;
                this.setState({
                    loading: false,
                    managerGroupData,
                });
            })
            .catch((err) => {
                if (!this.open) return;
                this.setState({
                    loading: false,
                });
                log.error(err);
                message.error('获取用户组失败');
            });
    }

    handleGetManagerList(groupId) {
        const { urls } = this.props;
        if (!groupId) {
            this.setState({
                loading: false,
                managerData: [],
            });
            return;
        }
        this.setState({
            loading: true,
            managerData: [],
        });
        fetch({
            urls,
            apiPath: '/common-manager-list',
            apiData: {
                group_id: groupId,
            },
            apiMethod: 'get',
            opts: {
                timeout: 60 * 1000,
            },
        })
            .then((data) => {
                const managerData = data.data.map((item) => {
                    return {
                        label: item.name,
                        value: item.managerId,
                        key: item.managerId,
                    };
                });
                // 判断如果卸载,则不再设置数据
                if (!this.open) return;
                this.setState({
                    loading: false,
                    managerData,
                });
            })
            .catch((err) => {
                if (!this.open) return;
                this.setState({
                    loading: false,
                });
                log.error(err);
                message.error('获取顾问列表失败');
            });
    }

    handleChangeManager(managerId) {
        const { onChange, value } = this.props;
        onChange(
            value.map(function (id, index) {
                if (index === 1) return managerId;
                return id;
            }),
        );
    }

    handleChangeGroup(groupId) {
        const { onChange } = this.props;
        onChange([groupId, '']);
    }
}

AjaxManagerSelect.propTypes = {
    urls: PropTypes.object, // url字典
    groupId: PropTypes.string,
    value: PropTypes.array,
    onChange: PropTypes.func,
};

export default AjaxManagerSelect;
